<template>
  <div class="pdf-viewer-container">
    <div class="pdf-toolbar">
      <el-button-group>
        <el-button size="mini" icon="el-icon-arrow-left" @click="prevPage" :disabled="pageNum <= 1"></el-button>
        <el-button size="mini" icon="el-icon-arrow-right" @click="nextPage" :disabled="pageNum >= pageCount"></el-button>
      </el-button-group>
      <span class="page-info">
        第 {{ pageNum }} 页 / 共 {{ pageCount }} 页
      </span>
      <el-slider
        v-model="scale"
        :min="50"
        :max="200"
        :step="10"
        style="width: 150px; margin: 0 10px"
        @change="handleScaleChange"
      ></el-slider>
      <el-button size="mini" icon="el-icon-zoom-in" @click="zoomIn"></el-button>
      <el-button size="mini" icon="el-icon-zoom-out" @click="zoomOut"></el-button>
      <el-button size="mini" icon="el-icon-full-screen" @click="toggleFullscreen"></el-button>
    </div>

    <div class="pdf-content" ref="pdfContainer">
      <canvas ref="pdfCanvas" class="pdf-canvas"></canvas>
    </div>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'

export default {
  name: 'PdfViewer',
  props: {
    src: { type: String, required: true }
  },
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageCount: 0,
      scale: 100,
      isFullscreen: false
    }
  },
  mounted() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.10.377/build/pdf.worker.min.js'
    this.loadPdf()
  },
  beforeDestroy() {
    if (this.src.startsWith('blob:')) {
      URL.revokeObjectURL(this.src)
    }
  },
  watch: {
    src() {
      this.loadPdf()
    },
    pageNum() {
      this.renderPage()
    }
  },
  methods: {
    // 加载PDF
    async loadPdf() {
      try {
        let pdfData
        if (this.src.startsWith('blob:')) {
          const response = await fetch(this.src)
          const arrayBuffer = await response.arrayBuffer()
          pdfData = { data: arrayBuffer }
        } else {
          pdfData = { url: this.src }
        }

        const loadingTask = pdfjsLib.getDocument(pdfData)
        this.pdfDoc = await loadingTask.promise
        this.pageCount = this.pdfDoc.numPages
        this.renderPage()
      } catch (error) {
        console.error('PDF加载失败:', error)
        this.$message.error('PDF加载失败')
      }
    },

    // 渲染当前页
    async renderPage() {
      if (!this.pdfDoc) return

      const page = await this.pdfDoc.getPage(this.pageNum)
      const viewport = page.getViewport({ scale: this.scale / 100 })

      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width

      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise
    },

    // 上一页
    prevPage() {
      if (this.pageNum > 1) {
        this.pageNum--
      }
    },

    // 下一页
    nextPage() {
      if (this.pageNum < this.pageCount) {
        this.pageNum++
      }
    },

    // 缩放变化
    handleScaleChange() {
      this.renderPage()
    },

    // 放大
    zoomIn() {
      if (this.scale < 200) {
        this.scale += 10
      }
    },

    // 缩小
    zoomOut() {
      if (this.scale > 50) {
        this.scale -= 10
      }
    },

    // 切换全屏
    toggleFullscreen() {
      if (!this.isFullscreen) {
        const el = this.$refs.pdfContainer
        el.requestFullscreen?.() ||
        el.webkitRequestFullscreen?.() ||
        el.msRequestFullscreen?.()
      } else {
        document.exitFullscreen?.() ||
        document.webkitExitFullscreen?.() ||
        document.msExitFullscreen?.()
      }
      this.isFullscreen = !this.isFullscreen
    }
  }
}
</script>

<style lang="scss" scoped>
.pdf-viewer-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;

    .page-info {
      margin: 0 15px;
      font-size: 14px;
      color: #606266;
    }
  }

  .pdf-content {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #525659;

    .pdf-canvas {
      margin: 10px 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
